<template>
  <div class="kp-index">
    <!-- //轮播 -->
    <header class="kp-header" ref="header">
      <div class="kp-top" ref="opcof" v-if="isShow">
        <div class="kp-dw kp-flex-1" @click="city"><span>{{cityname}}</span></div>
        <div class="kp-search kp-flex-1" @click="search">
          <input type="text" id="search" placeholder="目的地/关键词" readonly />
        </div>
        <div class="kp-yj kp-flex-1">
        </div>
      </div>
      <div class="kp-top active" ref="opcon" v-else>
        <div class="kp-dw kp-flex-1"><span>{{cityname}}</span></div>
        <div class="kp-search kp-flex-1" @click="search">
          <input type="text" id="search" placeholder="目的地/关键词" readonly />
        </div>
        <div class="kp-yj kp-flex-1">
        </div>
      </div>
      <div class="kp-banner">
        <swiper :options="swiperOptionbanner">
          <swiper-slide v-for="(item,index) in bannerlist" :key="index">
            <a :href="item.shareURL"><img :src="'http://img.kpcx179.com/'+item.coverPicture" alt="" /></a>
          </swiper-slide>
          <div class="swiper-pagination" slot="pagination"></div>
        </swiper>
      </div>
    </header>
    <!-- //按钮 -->
    <nav>
      <ul>
        <li class="nav-top">
          <router-link to="/index/scenic">
            <span><img src="../../assets/nav-5.png" /></span>
            <p>景区门票</p>
          </router-link>
        </li>
        <li class="nav-top">
          <router-link :to="{name:'hotelIndex',params:{cityname:cityname}}">
            <span><img src="../../assets/nav-1.png" /></span>
            <p>国内酒店</p>
          </router-link>
        </li>
        <li class="nav-top">
          <router-link to="/index/train">
            <span><img src="../../assets/nav-2.png" /></span>
            <p>火车票</p>
          </router-link>
        </li>
        <li class="nav-top">
          <router-link to="/index/aircraft">
            <span><img src="../../assets/nav-3.png" /></span>
            <p>飞机票</p>
          </router-link>
        </li>
        <li class="nav-top" @click="film">
          <a>
            <span><img src="../../assets/nav-4.png" /></span>
            <p>电影票</p>
          </a>
        </li>
        <li class="nav-bottom">
          <router-link to="/index/car/index">
            <span><img src="../../assets/nav-6.png" /></span>
            <p>汽车票</p>
          </router-link>
        </li>
        <li class="nav-bottom" @click="isLogin('/my/wallet')">
          <!--<router-link to="/my/wallet">-->
          <span><img src="../../assets/nav-7.png" /></span>
          <p class="navP">钱包</p>
          <!--</router-link>-->
        </li>
        <li class="nav-bottom" @click="isLogin('/my/coupon/getcoupon')">
          <!--<router-link to="/my/coupon/getcoupon">-->
          <span><img src="../../assets/nav-8.png" /></span>
          <p class="navP">领券</p>
          <!--</router-link>-->
        </li>
        <!--<li class="nav-bottom">
					<router-link to="/nav">
						<span><img src="../../assets/nav-9.png" /></span>
						<p>问答</p>
					</router-link>
				</li>
				<li class="nav-bottom">
					<router-link to="/nav">
						<span><img src="../../assets/nav-10.png" /></span>
						<p>客服</p>
					</router-link>
				</li>-->
      </ul>
      <!--<p class="kp-nav-dot">
				<span class="on"></span>
				<span></span>
			</p>-->
    </nav>
    <!-- //新手大礼包 -->
    <div class="kp-xrlb mt-20" v-show="isHide">
      <img src="../../assets/xrlb.png" alt="" />
      <router-link to="/lb" class="kp-lb-a"></router-link>
    </div>
    <!-- //限时购 -->
    <div class="kp-time-shop mt-20" v-show="isHide">
      <h2>
        超值限时购
        <span><a href="">进入活动会场 ></a></span>
      </h2>
      <div class="kp-ts-content">
        <div class="kp-tsc-for">
          <img src="../../assets/time-shop-1.png" alt="" />
          <i class="kp-tsc-bg"></i>
          <h3>石家庄漫山花溪谷</h3>
          <p>
            <em>￥</em>
            <em>19.9</em>
            <em>元</em>
          </p>
        </div>
        <div class="kp-tsc-for">
          <img src="../../assets/time-shop-2.png" alt="" />
          <i class="kp-tsc-bg"></i>
          <h3>石家庄大浪淘沙</h3>
        </div>
        <div class="kp-tsc-for">
          <img src="../../assets/time-shop-3.png" alt="" />
          <i class="kp-tsc-bg"></i>
          <h3>石家庄紫云山景区</h3>
        </div>
      </div>
    </div>
    <div class="kp-ts-activity mt-20" v-show="isHide">
      <ul>
        <li>
          <span>签到赚金币</span>
          <p>好礼兑不停</p>
        </li>
        <li>
          <span>邀请好友</span>
          <p>大礼等你拿</p>
        </li>
        <li>
          <span>优惠券</span>
          <p>超值享优惠</p>
        </li>
        <li>
          <span>主题酒店</span>
          <p>游玩超省心</p>
        </li>
      </ul>
    </div>
    <!-- 热映电影 -->
    <div class="hot_movies mar_bot" v-if="movielist.length!=0">
      <div class="hot_mo">
        <!-- title -->
        <div class="hot_title">
          <span class="hot_text">热映电影</span>
          <a href="javascript:;" class="hot_more" @click="cinema(1)">更多影片></a>
        </div>
        <div class="hot_tab">
          <ul class="wccy-after">
            <li class="fl hot_active" @click="tab(1)">正在热映</li>
            <li class="fl" @click="cinema(0)">即将上映</li>
          </ul>
        </div>
        <div class="hot_dy">
          <swiper :options="swiperOption">
            <swiper-slide v-for="(item,index) in movielist" :key="index">
              <div class="swiper_item" @click="cinemashow(item.movieId)">
                <div class="swiper_img" v-lazy-container="{ selector: 'img' }">
                  <img :data-src="item.movieImg" :data-error="defaultSrc" :data-loading="defaultSrc" alt="" />
                </div>
                <p class="hote_p">{{item.movieName}}</p>
                <p class="hot_moveiea">
                  <a href="javascript:;" class="movie_gp" v-if="item.showst == 3">购票</a>
                  <a href="javascript:;" class="movie_ys" v-else>预售</a>
                </p>
              </div>
            </swiper-slide>
          </swiper>
        </div>
      </div>
    </div>
    <!-- 景点 -->
    <div class="scense_inde mar_bot">
      <div class="hot_mo scenery_mo">
        <!-- title -->
        <div class="hot_title">
          <span class="hot_text scenery_text">周边景点推荐</span>
          <a href="javascript:;" class="hot_more" @click="scenic">更多景点></a>
        </div>
        <div class="secery_recom">
          <ul class="wccy-after">
            <li class="fl" v-for="(item,index) in allHomeRecommendTrip" :key="index"
              @click="scenit(item.hotel_scenic_ID,item.scenicType)">
              <div class="scenery_img" v-lazy-container="{ selector: 'img' }"><img :data-src="item.picture"
                  :data-error="defaultSrc" :data-loading="defaultSrc" /></div>
              <div class="scenery_ti">
                <p class="scenery_hanzi">{{item.title}}</p>
                <!--<p class="scenery_yy">Xibaipo</p>-->
              </div>
              <a class="scenery_a">
                <em class="parice_y">￥</em>
                <em class="parice_p">{{item.minPrice}}</em>
                <em class="parice_h ">起</em>
              </a>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <!-- 酒店 -->
    <div class="hotel_index mar_bot" v-show="false">
      <div class="hotel_title">酒店精选</div>
      <div class="hotel_neir">
        <div class="hotel_list">
          <div class="hotel_item">
            <div class="hotel_img"><img src="../../assets/movie_1.png" /></div>
            <div class="hotel_text">石家庄希尔顿大酒店</div>
            <div class="hotel_price">
              <em class="hotel_p">￥</em>
              <em class="hotel_s">998</em>
              <em class="hotel_h">起</em>
            </div>
            <div class="hotel_wz">
              <img src="../../assets/zuobiao.png" />
              <span class="hotel_wy">距离我0.8公里</span>
            </div>
          </div>
          <div class="hotel_item">
            <div class="hotel_img"><img src="../../assets/movie_1.png" /></div>
            <div class="hotel_text">石家庄希尔顿大酒店</div>
            <div class="hotel_price">
              <em class="hotel_p">￥</em>
              <em class="hotel_s">998</em>
              <em class="hotel_h">起</em>
            </div>
            <div class="hotel_wz">
              <img src="../../assets/zuobiao.png" />
              <span class="hotel_wy">距离我0.8公里</span>
            </div>
          </div>
          <div class="hotel_item">
            <div class="hotel_img"><img src="../../assets/movie_1.png" /></div>
            <div class="hotel_text">石家庄希尔顿大酒店</div>
            <div class="hotel_price">
              <em class="hotel_p">￥</em>
              <em class="hotel_s">998</em>
              <em class="hotel_h">起</em>
            </div>
            <div class="hotel_wz">
              <img src="../../assets/zuobiao.png" />
              <span class="hotel_wy">距离我0.8公里</span>
            </div>
          </div>
          <div class="hotel_item">
            <div class="hotel_img"><img src="../../assets/movie_1.png" /></div>
            <div class="hotel_text">石家庄希尔顿大酒店</div>
            <div class="hotel_price">
              <em class="hotel_p">￥</em>
              <em class="hotel_s">998</em>
              <em class="hotel_h">起</em>
            </div>
            <div class="hotel_wz">
              <img src="../../assets/zuobiao.png" />
              <span class="hotel_wy">距离我0.8公里</span>
            </div>
          </div>
          <div class="hotel_item">
            <div class="hotel_img"><img src="../../assets/movie_1.png" /></div>
            <div class="hotel_text">石家庄希尔顿大酒店</div>
            <div class="hotel_price">
              <em class="hotel_p">￥</em>
              <em class="hotel_s">998</em>
              <em class="hotel_h">起</em>
            </div>
            <div class="hotel_wz">
              <img src="../../assets/zuobiao.png" />
              <span class="hotel_wy">距离我0.8公里</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 游记 -->
    <div class="trval_index" v-show="isHide">
      <div class="trval_title">热门游记</div>
      <div class="trval_examp">
        <ul class="wccy-after">
          <li class="li_one">
            <div class="trval_ulimg">
              <img src="http://img.kpcx179.com/travel/20181225/2018122527960531.jpg" alt="" />
            </div>
            <div class="trval_lititle">
              <p class="trval_litext">网红打卡基地网红打卡基地网红基地</p>
              <div class="trval_titl_aut">
                <div class="ul_autor">
                  <img src="http://img.kpcx179.com/travel/20181225/2018122581269345.jpg" alt="" />
                  <span>冰糖和雪梨</span>
                </div>
                <span class="ul_liulan">5.5w人浏览</span>
              </div>
            </div>
          </li>
          <li class="li_two">
            <div class="trval_ulimg">
              <img src="http://img.kpcx179.com/travel/20181225/2018122527960531.jpg" alt="" />
            </div>
            <div class="trval_lititle">
              <p class="trval_litext trval_litwotext">
                网红打卡基地网红打卡基地网红基地
              </p>
              <div class="trval_titl_aut">
                <div class="ul_autor">
                  <img src="http://img.kpcx179.com/travel/20181225/2018122581269345.jpg" alt="" />
                  <span>冰糖和雪梨</span>
                </div>
                <span class="ul_liulan">5.5w人浏览</span>
              </div>
            </div>
          </li>
          <li class="li_two">
            <div class="trval_ulimg">
              <img src="http://img.kpcx179.com/travel/20181225/2018122527960531.jpg" alt="" />
            </div>
            <div class="trval_lititle">
              <p class="trval_litext trval_litwotext">
                网红打卡基地网红打卡基地网红基地
              </p>
              <div class="trval_titl_aut">
                <div class="ul_autor">
                  <img src="http://img.kpcx179.com/travel/20181225/2018122581269345.jpg" alt="" />
                  <span>冰糖和雪梨</span>
                </div>
                <span class="ul_liulan">5.5w人浏览</span>
              </div>
            </div>
          </li>
          <li class="li_one">
            <div class="trval_ulimg">
              <img src="http://img.kpcx179.com/travel/20181225/2018122527960531.jpg" alt="" />
            </div>
            <div class="trval_lititle">
              <p class="trval_litext">网红打卡基地网红打卡基地网红基地</p>
              <div class="trval_titl_aut">
                <div class="ul_autor">
                  <img src="http://img.kpcx179.com/travel/20181225/2018122581269345.jpg" alt="" />
                  <span>冰糖和雪梨</span>
                </div>
                <span class="ul_liulan">5.5w人浏览</span>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <div></div>
    <!-- //定位 -->
    <baidu-map class="map" @ready="handler" style="height: 0;width: 0;opacity: 0;">
      <bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :showAddressBar="true" :autoLocation="true"></bm-geolocation>
    </baidu-map>
  </div>
</template>

<script>
  import {
    swiper,
    swiperSlide
  } from 'vue-awesome-swiper';
  import {
    mapState
  } from "vuex";
  export default {
    data() {
      return {
        swiperOptionbanner: {
          notNextTick: true,
          autoplay: 3000,
          setWrapperSize: true,
          autoHeight: true,
          observeParents: true,
          loop: true,
          loopedSlides: 1,
          slidesPerView: 1,
          pagination: {
            el: '.swiper-pagination',
            clickable: true,
            paginationClickable: false,
            paginationType: 'custom',
          }
        },
        swiperOption: {
          //notNextTick: true,
          //autoplay: 3000,
          //setWrapperSize: true,
          //autoHeight: true,
          //observeParents: true,
          //loop: true,
          //loopedSlides: 1,
          //slidesPerView: 3.8,
          slidesPerView: 3.6,
          paginationClickable: true,
          //spaceBetween: 20,
          freeMode: true,
        },
        openid: '',
        cityname: '', //定位城市
        cityId: '', //定位城市id
        filmCityList: [], //电影城市
        isHide: false, //板块隐藏
        bannerlist: [], //首页轮播图
        hotMovieslist: [], //存热映电影列表
        comingMoviesList: [], //存待映电影列表
        movielist: [], //存电影列表
        indexcityId: '', //首页城市id
        flag: 1, //1为热映电影 0为待映电影
        allHomeRecommendTrip: [], //周边景点推荐
        isShow: true,
        defaultSrc: 'http://h5.kpcx179.com/wximages/jingquliebiao.png',
        isCodeFlag: true,
        isGetLocationMessage: false,
      }
    },
    mounted() {
      // this.getCityList();
      this.$store.state.common.cityinfo || (this.isGetLocationMessage = true);
      //城市
      this.cityname = this.cityinfo.cityName || "北京";
      //获取电影城市列表
      this.getfilmCityList();
      //获取头部轮播图
      this.getbanner();
      //获取景点信息
      this.getqunawan();
      //屏幕滚动
      window.addEventListener('scroll', this.handleScroll);
    },
    methods: {
      //方法放置
      isLogin(url) {
        if (this.userinfo.userID) {
          this.$router.push({
            path: url,
            query: {}
          })
        } else {
          this.$router.push({
            path: '/login',
          })
        }
      },
      handler({
        BMap,
        map
      }) {
        let that = this;
        var geolocation = new BMap.Geolocation();
        geolocation.getCurrentPosition(function (r) {
          console.log('当前定位参数：', r);
          that.initLocation = true;
          if (this.getStatus() == BMAP_STATUS_SUCCESS) {
            var mk = new BMap.Marker(r.point);
            map.addOverlay(mk);
            map.panTo(r.point);
            //逻辑代码
            if (that.$store.getters.scenic_cityinfo) {
              that.cityinfo.cityName = that.$store.getters.scenic_cityinfo;
              that.$route.meta.xcache = false;
            } else {
              if (r.address.city) {
                var cityinfo = {
                  cityName: r.address.city.replace(/市/, ''),
                  longitude: r.longitude,
                  latitude: r.latitude,
                }
                that.$store.commit('CITYINFO', cityinfo);
                that.$store.commit('SCENIC_CITYNAME', cityinfo.cityName)
              } else {
                var cityinfo = {
                  "cityName": "北京",
                  "longitude": "116.3971023134",
                  "latitude": "39.9129988103"
                };
                that.$store.commit('CITYINFO', cityinfo);
                that.$store.commit('SCENIC_CITYNAME', cityinfo.cityName)
              }
            }
          } else {
            var cityinfo = {
              "cityName": "北京",
              "longitude": "116.3971023134",
              "latitude": "39.9129988103"
            };
            that.$store.commit('CITYINFO', cityinfo);
            that.$store.commit('SCENIC_CITYNAME', cityinfo.cityName)
          }
        }, {
          enableHighAccuracy: true
        })
      },
      getfilmCityList() { //获取电影城市列表
        //定位城市
        //				console.log(this.$store.state.hotel)
        var param = {};
        let that = this;
        this.$http.post(this.$baseUrl.baseurl + "mymovie/movie/getCities", param).then((res) => {
          if (res.data.Code = "0") {
            res.data.Result.citys && res.data.Result.citys.forEach((item) => {
              if (item.name == that.cityinfo.cityName) {
                that.cityId = item.id;
                that.indexcityId = item.id;
                that.$store.commit('FILM_CITYNAME', that.cityinfo.cityName);
                that.$store.commit('FILM_LON', that.cityinfo.longitude);
                that.$store.commit('FILM_LAT', that.cityinfo.latitude);
                that.$store.commit('FILM_CITYID', item.id);
              }
            })
            this.filmCityList = this.changeCityList(res.data.Result.citys); //处理城市数据

            localStorage.setItem("movieCityList", JSON.stringify(this.filmCityList)); //本地存储
            //热映电影
            this.tab(1);
          }

        }).catch((err) => {

        });
      },
      changeCityList(arr) { //处理城市格式的函数
        var cityList = arr.sort((one, two) => { //城市排序
          var flag = 0;
          (one.pinyinName < two.pinyinName) && (flag = -1);
          (one.pinyinName > two.pinyinName) && (flag = 1);
          return flag;
        });
        return this.getCityObj(cityList);
      },
      getCityObj(arr) { //处理城市首字母构建城市对象
        var arrList = []; //数据结果的数组
        var arrX = []; //临时存储数组
        arr.forEach((item, key) => {
          arrX.push(item);
          if ((key > 0) && (arr[key - 1].pinyinName[0] != item.pinyinName[0])) {
            var x = arrX.pop(); //删除最后一项
            var obj = {
              letter: arr[key - 1].pinyinName[0].toUpperCase(), //小写转大写
              cityList: arrX,
            }
            arrList.push(obj);
            arrX = [x]; //清空放入
          } else if (key == arr.length - 1) {
            var obj = {
              letter: item.pinyinName[0].toUpperCase(),
              cityList: arrX,
            }
            arrList.push(obj);
          }
        })
        return arrList;
      },
      film() { //到达电影
        this.$router.push({
          path: '/index/film',
        })
      },
      getbanner() {
        var that = this;
        let param = {
          type: 0
        };
        this.$http.post(this.$baseUrl.baseurl + "kpcx/carouse/homePageBanner", param).then((res) => {
          if (res.data.Code = "0") {
            if (res.data.Result.figureList) {
              this.bannerlist = res.data.Result.figureList;
            }
          }

        }).catch((err) => {
          console.log(err);
        });
      },
      gethotMovieslist() {
        let that = this;
        let param = {
          "cityId": that.indexcityId || 1, //定位城市ID，默认北京
          "pageCount": 10,
          "currentPage": 1,
        };
        this.$http.get(this.$baseUrl.baseurl + "mymovie/movie/appHotMovies", param).then((res) => {
          if (res.data.Code == "0") {
            if (res.data.Result.hotMovies.length != 0) {
              res.data.Result.hotMovies && res.data.Result.hotMovies.forEach((item, index) => {
                (item.movieImg) && (item.movieImg = item.movieImg.replace('w.h', '215.300'));
              })
              let hotMovieslist = res.data.Result.hotMovies;
              that.hotMovieslist.push(...hotMovieslist)
            }
          }
        }).catch((err) => {
          console.log(err);
        })
      },
      getcomingMoviesList() {
        let that = this;
        let param = {
          "cityId": that.indexcityId || 1, //定位城市ID，默认北京
          "pageCount": 10,
          "currentPage": 1,
        };
        this.$http.get(this.$baseUrl.baseurl + "mymovie/movie/appComingMovies", param).then((res) => {
          if (res.data.Code == "0") {
            if (res.data.Result.comingMovies.length != 0) {
              res.data.Result.comingMovies && res.data.Result.comingMovies.forEach((item, index) => {
                (item.movieImg) && (item.movieImg = item.movieImg.replace('w.h', '215.300'));
              })
              let comingMoviesList = res.data.Result.comingMovies;
              that.comingMoviesList.push(...comingMoviesList)
            } else {

            }
          } else {

          }
        }).catch((err) => {
          console.log(err);
        })
      },
      tab(index) {
        this.movielist = [];
        this.hotMovieslist = [];
        this.comingMoviesList = [];
        //热映电影
        this.gethotMovieslist();
        //待映电影
        this.getcomingMoviesList();
        this.flag = index;
        this.movielist = this.flag ? this.hotMovieslist : this.comingMoviesList;

      },
      getqunawan() {
        let that = this;
        let param = {
          "cityName": that.cityname || "北京",
        };
        this.$http.get(this.$baseUrl.baseurl + "xcscenic/getHomeRecommend", param).then((res) => {

          if (res.data.Code == "0") {
            this.allHomeRecommendTrip = res.data.Result.allHomeRecommendTrip || [];
          }
        }).catch((err) => {
          console.log(err);
        })
      },
      cinema(index) {
        let cityId = this.indexcityId;
        this.$router.push({
          path: "/index/film/film_all",
          query: {
            cityId: cityId,
            tabIndex: index,
          }
        })
      },
      cinemashow(movieId) {
        let cityId = this.indexcityId;
        this.$router.push({
          path: '/index/film/filmshow',
          query: {
            "movieId": movieId,
            "cityId": cityId,
            "type": 0
          }
        })
      },
      scenic() {
        this.$router.push({
          path: "/index/scenic",
          query: {

          }
        })
      },
      handleScroll(pros) {
        //				console.log(window.pageYOffset);
        var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;

        if (this.$refs.header) {
          var clientHeight = this.$refs.header.clientHeight;
          //					var opacity = Math.abs(Math.round(window.pageYOffset)) / clientHeight;
          //					this.$refs.opcof.style.opacity = 1- opacity;
          //					this.$refs.opcon.style.opacity = opacity;
          if (scrollTop > clientHeight) {
            this.isShow = false;
          } else {
            this.isShow = true;
          }
        }

      },
      city() {
        this.$router.push({
          path: "/indexCity",
          query: {

          }
        })
      },
      search() {
        this.$router.push({
          path: "/indexSearch",
          query: {
            "cityid": this.indexcityId,
          }
        })
      },
      scenit(scenicId, scenicType, index) {
        this.$router.push({
          path: '/index/scenic/scenicContent',
          query: {
            "scenicId": scenicId,
            "scenicType": scenicType,
            "latitude": "",
            "longitude": ""
          }
        })
      }
    },
    created() {
      function getQueryString(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
        var r = window.location.search.substr(1).match(reg);
        if (r != null) return unescape(r[2]);
        return null;
      };
      var code = getQueryString("code");
      if (code) {
        var param = '{"code":"' + code + '","ex":""}';
        this.$http.post(this.$baseUrl.baseurl + 'kpcx/wx/getUserInfo', param).then((res) => {
          if (res.data.Code == "0") {
            this.openid = res.data.Result.userInfo.openid;
            localStorage.setItem('openid', this.openid);
            this.$store.commit('WXOPENID', this.openid)
          };
        })
      } else {
        var ua = navigator.userAgent.toLowerCase();
        if (ua.match(/MicroMessenger/i) == "micromessenger") {
          var url = encodeURIComponent(this.$baseUrl.domainName);
          window.location.href =
            'https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx348ec18fec6bf757&redirect_uri=' +
            url + '&response_type=code&scope=snsapi_userinfo&state=1#wechat_redirect'
        }
      };
    },
    watch: {
      //监听放置
    },
    components: {
      swiper,
      swiperSlide
    },
    computed: {
      ...mapState({
        cityinfo: state => state.common.cityinfo,
        userinfo: state => state.common.userinfo,
      })
    }
  };

</script>

<style scoped>
  .kp-index {
    padding-bottom: 108px;
  }

  .kp-header {
    position: relative;
  }

  .kp-top {
    position: fixed;
    display: flex;
    width: 100%;
    display: -webkit-flex;
    top: 0;
    left: 0;
    z-index: 99;
    padding: 18px 0;
  }

  .kp-top.active {
    background: #fff;
  }

  .kp-top.active .kp-dw span {
    background: #fff;
    color: #000;
  }

  .kp-dw {
    text-align: center;
  }

  .kp-dw span {
    /*display: inline-block;*/
    width: 85px;
    height: 67px;
    text-align: center;
    line-height: 67px;
    background: rgba(26, 27, 26, 0.45);
    border-radius: 34px;
    font-family: 'PingFang SC Medium';
    font-size: 22px;
    color: #fff;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-left: 30px;
  }

  .kp-banner {
    width: 750px;
    height: 306px;
  }

  .kp-banner .swiper-container-horizontal>.swiper-pagination-bullets {
    bottom: 51px;
  }

  .kp-banner img {
    width: 750px;
    height: 306px;
  }

  #search {
    width: calc(466px - 85px);
    height: 62px;
    border-radius: 30px;
    border: none;
    line-height: 62px;
    background: #f4f5f9 url(../../assets/search.png) 34px center no-repeat;
    background-size: 32px 32px;
    padding-left: 85px;
    outline: none;
  }

  .kp-yj {
    text-align: center;
  }

  .kp-yj a img {
    width: 85px;
    height: 67px;
  }

  /* //nav */

  nav {
    width: 718px;
    /*height: 367px;*/
    background: #fff;
    margin: 0 auto;
    /*box-shadow: 0px -3px 100px rgba(142, 140, 140, 0.14);*/
    box-shadow: 1px 1px 15px rgba(142, 140, 140, 0.14);
    border-radius: 25px;
    margin-top: -38px;
    position: relative;
    z-index: 9;
  }

  nav ul {
    padding-top: 27px;
  }

  nav ul li {
    width: 20%;
    float: left;
    text-align: center;
    margin-bottom: 41px;
  }

  nav ul:after {
    content: '';
    display: block;
    clear: both;
    overflow: hidden;
  }

  nav ul li.nav-top img {
    width: 80px;
    height: 80px;
  }

  nav ul li.nav-bottom {
    margin-bottom: 36px;
  }

  nav ul li.nav-bottom img {
    width: 80px;
    height: 80px;
    margin-bottom: 18px;
  }

  nav ul li a p {
    font-size: 28px;
    font-family: 'PingFang-SC-Medium';
    color: #333;
  }

  .navP {
    font-size: 28px;
    font-family: 'PingFang-SC-Medium';
    color: #333;
  }

  nav p.kp-nav-dot {
    text-align: center;
  }

  nav p.kp-nav-dot span {
    display: inline-block;
    width: 12px;
    height: 12px;
    background: #ebebeb;
    border-radius: 50%;
    margin: 0 3px;
  }

  nav p.kp-nav-dot span.on {
    width: 43px;
    background: #69b452;
    border-radius: 6px;
  }

  /* //新人礼包 */

  .kp-xrlb {
    position: relative;
  }

  .kp-lb-a {
    background: url(../../assets/lq.png) no-repeat center center;
    background-size: 232px 90px;
    width: 232px;
    height: 90px;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
  }

  .kp-xrlb img {
    width: 100%;
  }

  /* //限时购 */

  .kp-time-shop {
    width: 718px;
    height: 359px;
    margin: 0 auto;
    background: #fff;
    box-shadow: 0 8px 50px rgba(142, 140, 140, 0.14);
    border-radius: 25px;
  }

  .kp-time-shop h2 {
    padding: 28px 15px 27px 15px;
    font-family: 'PingFang-SC-Medium';
    font-size: 34px;
    color: #333;
    font-weight: 700;
  }

  .kp-time-shop h2 span a {
    font-size: 26px;
    color: rgb(242, 64, 28);
    float: right;
    padding-right: 7px;
  }

  .kp-tsc-for {
    position: relative;
  }

  .kp-tsc-for:nth-child(1) {
    width: 342px;
    height: 244px;
    border-top-left-radius: 25px;
    border-bottom-left-radius: 25px;
    -webkit-border-top-left-radius: 25px;
    -webkit-border-bottom-left-radius: 25px;
    overflow: hidden;
    margin-left: 16px;
    float: left;
  }

  .kp-tsc-bg {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: -webkit-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5));
    /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5));
    /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5));
    /* Firefox 3.6 - 15 */
    background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5));
    /* 标准的语法 */
  }

  .kp-tsc-for:nth-child(1) img {
    width: 342px;
    height: 244px;
  }

  .kp-tsc-for:nth-child(1) h3 {
    position: absolute;
    top: 147px;
    left: 0;
    padding: 0 13px 0 13px;
    color: #fff;
    font-size: 28px;
    font-weight: normal;
    font-family: 'PingFang-SC-Medium';
  }

  .kp-tsc-for:nth-child(1) p {
    position: absolute;
    top: 188px;
    left: 12px;
    height: 42px;
    padding: 0 14px;
    border-radius: 10px;
    line-height: ;
    background: #ff5454;
    text-align: center;
    line-height: 42px;
    content: '';
    display: block;
    overflow: hidden;
    clear: both;
  }

  .kp-tsc-for:nth-child(1) p em {
    float: left;
  }

  .kp-tsc-for:nth-child(1) p em:nth-child(1) {
    font-size: 18px;
    color: #fff;
    font-family: 'PingFang-SC-Medium';
  }

  .kp-tsc-for:nth-child(1) p em:nth-child(2) {
    font-size: 30px;
    color: #fff;
    font-family: 'PingFang-SC-Medium';
  }

  .kp-tsc-for:nth-child(1) p em:nth-child(3) {
    font-size: 20px;
    color: #fff;
    font-family: 'PingFang-SC-Medium';
  }

  .kp-tsc-for:nth-child(2) {
    width: 342px;
    height: 120px;
    float: right;
    margin-bottom: 4px;
    border-top-right-radius: 25px;
    -webkit-border-top-right-radius: 25px;
    overflow: hidden;
    margin-right: 16px;
  }

  .kp-tsc-for:nth-child(2) h3 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 120px;
    text-align: center;
    line-height: 120px;
    color: #fff;
    font-size: 28px;
    font-weight: normal;
    font-family: 'PingFang-SC-Medium';
  }

  .kp-tsc-for:nth-child(3) {
    width: 342px;
    height: 120px;
    float: right;
    border-bottom-right-radius: 25px;
    -webkit-border-bottom-right-radius: 25px;
    overflow: hidden;
    margin-right: 16px;
  }

  .kp-tsc-for:nth-child(3) h3 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 120px;
    text-align: center;
    line-height: 120px;
    color: #fff;
    font-size: 28px;
    font-weight: normal;
    font-family: 'PingFang-SC-Medium';
  }

  .kp-tsc-for:nth-child(2) img {
    width: 342px;
    height: 120px;
  }

  .kp-tsc-for:nth-child(3) img {
    width: 342px;
    height: 120px;
  }

  /* //限时活动 */

  .kp-ts-activity {
    width: 718px;
    height: 156px;
    margin: 0 auto;
    box-shadow: 0 8px 50px rgba(142, 140, 140, 0.14);
    border-radius: 25px;
    background: -webkit-linear-gradient(rgb(255, 255, 255), rgb(251, 245, 232));
    /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(rgb(255, 255, 255), rgb(251, 245, 232));
    /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(rgb(255, 255, 255), rgb(251, 245, 232));
    /* Firefox 3.6 - 15 */
    background: linear-gradient(rgb(255, 255, 255), rgb(251, 245, 232));
    /* 标准的语法 */
  }

  .kp-ts-activity ul {
    display: flex;
    display: -webkit-flex;
  }

  .kp-ts-activity ul li {
    flex: 1;
    text-align: center;
    position: relative;
  }

  .kp-ts-activity ul li span {
    font-size: 30px;
    display: block;
    color: rgb(51, 51, 51);
    padding-top: 44px;
    font-family: 'PingFang-SC-Medium';
  }

  .kp-ts-activity ul li p {
    padding-top: 15px;
    font-size: 24px;
    color: rgb(153, 153, 153);
    font-family: 'PingFang-SC-Medium';
  }

  .kp-ts-activity ul li:nth-child(1):after {
    opacity: 0;
  }

  .kp-ts-activity ul li:after {
    content: '';
    width: 2px;
    height: 46px;
    background: #eaeaea;
    display: block;
    position: absolute;
    top: 50%;
  }

  /* <!-- 热映电影 --> */

  .index-box {
    font-size: 10px;
  }

  .hot_movies {
    font-family: 'PingFang-SC-Medium';
    width: 750px;
    height: 560px;
    padding: 0 17px 0 15px;
    box-sizing: border-box;
  }

  .hot_mo {
    width: 718px;
    height: 560px;
    border-radius: 25px;
    /*box-shadow: 0px 0px 2px 2px rgba(142, 140, 140, 0.14);*/
    box-shadow: 1px 1px 15px rgba(142, 140, 140, 0.14);
    padding-left: 16px;
    box-sizing: border-box;
    background: #fff;
  }

  .hot_title {
    padding-top: 34px;
  }

  .hot_text {
    font-size: 34px;
    line-height: 1;
    display: inline-block;
  }

  .hot_more {
    display: inline-block;
    float: right;
    margin: 9px 0 0 16px;
    font-size: 28px;
    color: rgb(153, 153, 153);
    margin-right: 16px;
  }

  .hot_tab {
    margin-top: 28px;
  }

  .hot_tab>ul {
    font-size: 32px;
    color: rgb(51, 51, 51);
  }

  .hot_tab>ul>li {
    margin-right: 41px;
  }

  .hot_active {
    color: rgb(228, 60, 38);
    position: relative;
  }

  .hot_active::before {
    content: '';
    width: 51px;
    height: 6px;
    border-radius: 3px;
    position: absolute;
    left: 50%;
    bottom: -13px;
    margin-left: -25.5px;
    background-color: rgb(255, 84, 84);
  }

  .hot_dy {
    margin-top: 45px;
  }

  .swiper_item {
    width: 174px;
    display: inline-block;
  }

  .swiper_img {
    display: inline-block;
  }

  .swiper_img,
  .swiper_img>img {
    width: 174px;
    height: 244px;
    border-radius: 8px;
  }

  .hote_p {
    margin-top: 19px;
    margin-bottom: 19px;
    font-size: 26px;
    color: #000;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .hot_moveiea {
    width: 174px;
    text-align: center;
  }

  .hot_moveiea>a {
    display: inline-block;
    width: 110px;
    height: 55px;
    color: #fff;
    border-radius: 28px;
    line-height: 55px;
    text-align: center;
  }

  .hot_moveiea>a.movie_gp {
    background: rgb(59, 195, 194);
  }

  .hot_moveiea>a.movie_ys {
    background: rgb(228, 60, 38);
  }

  .scense_inde {
    font-family: 'PingFang-SC-Medium';
    width: 750px;
    height: 569px;
    padding: 0 17px 0 15px;
    box-sizing: border-box;
    margin-top: 20px;
  }

  .secery_recom {
    margin-top: 36px;
    padding-left: 4.5px;
  }

  .secery_recom>ul {}

  .secery_recom>ul>li {
    width: 216px;
    height: 202px;
    border-radius: 25px;
    overflow: hidden;
    position: relative;
    margin: 0 10.5px 26px 10.5px;
  }

  .scenery_img {
    width: 216px;
    height: 202px;
    display: inline-block;
  }

  .scenery_img>img {
    width: 216px;
    height: 202px;
  }

  .scenery_neir {
    position: absolute;
    left: 0;
    top: 0;
    width: 216px;
    height: 202px;
  }

  .scenery_ti {
    color: #fff;
    position: absolute;
    left: 18px;
    top: 34px;
  }

  .scenery_hanzi {
    font-size: 30px;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.3;
  }

  .scenery_yy {
    font-size: 28px;
    margin-top: 15px;
    display: inline-block;
  }

  .scenery_price {
    margin-top: 58px;
  }

  .scenery_a {
    display: inline-block;
    float: right;
    color: #fff;
    background-color: rgb(255, 84, 84);
    padding: 7px 13px 3px 7px;
    border-radius: 10px 0px 25px 10px;
    position: absolute;
    right: 0;
    bottom: 0;
  }

  .parice_y {
    font-size: 18px;
  }

  .parice_p {
    font-size: 34px;
  }

  .parice_h {
    font-size: 22px;
  }

  .scenery_mo {
    padding-left: 0;
    overflow: hidden;
    height: 556px;
  }

  .scenery_text {
    margin-left: 16px;
  }

  .hotel_index {
    margin-top: 19px;
  }

  .hotel_title {
    padding-left: 30px;
    font-size: 34px;
    color: rgb(51, 51, 51);
    font-family: PingFang-SC-Medium;
  }

  .hotel_neir {
    margin-top: 35px;
    margin-left: 9px;
    height: 389px;
  }

  .hotel_list {
    overflow-x: auto;
    white-space: nowrap;
    width: auto;
  }

  .hotel_list::-webkit-scrollbar {
    background-color: transparent;
  }

  //.hotel_list{display: -webkit-box;overflow-x: scroll;-webkit-overflow-scrolling:touch;}
  .hotel_item {
    display: inline-block;
    width: 233px;
    height: 385px;
    border-radius: 15px;
    box-shadow: 0px 0px 14px 2px rgba(234, 235, 236, 0.58);
    margin: 4px 0 4px 21px;
  }

  .hotel_img {
    width: 187px;
    height: 187px;
    border-radius: 50%;
    margin: 16px 25px 15px 21px;
  }

  .hotel_img>img {
    width: 187px;
    height: 187px;
    border-radius: 50%;
  }

  .hotel_text {
    display: inline-block;
    width: 233px;
    padding: 0 40px 0 35px;
    font-size: 26px;
    text-align: center;
    line-height: 33px;
    letter-spacing: 0;
    margin-bottom: 17px;
    box-sizing: border-box;
    white-space: normal;
  }

  .hotel_price {
    line-height: 1;
    text-align: center;
    color: rgb(255, 66, 66);
    font-size: 34px;
  }

  .hotel_h {
    font-size: 26px;
    color: rgb(153, 153, 153);
  }

  .hotel_wz {}

  .hotel_wz>img {
    display: inline-block;
    width: 20px;
    height: 28px;
    vertical-align: middle;
    margin-left: 16px;
  }

  .hotel_wy {
    font-size: 26px;
    color: rgb(153, 153, 153);
    vertical-align: middle;
  }

  .trval_index {
    margin-top: 15px;
    font-family: 'PingFang-SC-Medium';
  }

  .trval_title {
    font-size: 34px;
    color: rgb(51, 51, 51);
    width: 100%;
    padding: 0 0 0 29px;
    box-sizing: border-box;
  }

  .trval_examp {
    margin-top: 37px;
    padding: 0 27px;
  }

  .trval_examp>ul {
    column-count: 2;
  }

  .trval_examp>ul>li {
    border-radius: 6px;
    overflow: hidden;
    display: inline-block;
    float: left;
    background: #fff;
    margin-bottom: 18px;
    box-shadow: 0px 0px 14px 2px rgba(234, 235, 236, 0.58);
  }

  .trval_examp>ul>li.li_one {
    width: 338px;
    height: 514px;
  }

  .trval_examp>ul>li.li_one>.trval_ulimg,
  .trval_examp>ul>li.li_one>.trval_ulimg>img {
    width: 338px;
    height: 339px;
  }

  .trval_examp>ul>li.li_two {
    width: 338px;
    height: 585px;
  }

  .trval_examp>ul>li.li_two>.trval_ulimg,
  .trval_examp>ul>li.li_two>.trval_ulimg>img {
    width: 338px;
    height: 445px;
  }

  .trval_lititle {
    padding: 23px 27px 0;
  }

  .trval_litext {
    color: rgb(34, 34, 34);
    font-size: 26px;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    width: 100%;
    overflow: hidden;
    line-height: 40px;
  }

  .trval_titl_aut {
    padding: 18px 0 0;
  }

  .ul_autor {
    display: inline-block;
  }

  .ul_autor>img {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    margin-right: 12px;
    vertical-align: middle;
    float: left;
  }

  .ul_autor>span {
    float: left;
    font-size: 22px;
    vertical-align: middle;
    color: rgb(51, 51, 51);
    font-family: 'PingFang-SC-Medium';
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    width: 108px;
    line-height: 46px;
    overflow: hidden;
  }

  .ul_liulan {
    color: rgb(168, 168, 168);
    font-size: 22px;
    float: right;
    width: 113px;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 46px;
  }

  .trval_litwotext {
    color: rgb(51, 51, 51);
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    width: 100%;
    overflow: hidden;
  }

  .trval_examp>ul>li:nth-child(2n-1) {
    margin-right: 18px;
  }

</style>
